<template>
    <div>
        <h2>门店显示列表</h2>
        <span>门店名称</span>
        <input type="text" v-model="quertInfo.ShopName">
        <span>服务范围</span>
        <select v-model="quertInfo.Scope">
            <option value="">请选择</option>
            <option :value="1">早点早餐</option>
            <option :value="2">下午茶</option>
            <option :value="3">晚点夜宵</option>
        </select>
        <input type="button" value="查询" @click="getShopList" class="btn btn-warning ">
        <input type="button" value="提交" @click="ok" class="btn btn-primary" />
        <input type="button" value="批量删除" @click="ShopAllDelete" class="btn btn-danger" />
        <input type="button" value="批量上架" @click="ShopAllUpt(1)" class="btn btn-info" />
        <input type="button" value="批量下架" @click="ShopAllUpt(0)" class="btn btn-info" />
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td><input type="checkbox" v-model="checkAll" @click="gocheckAll"/></td>
                    <td>门店名称</td>
                    <td>门店地址</td>
                    <td>门店Log</td>
                    <td>服务范围</td>
                    <td>店主姓名</td>
                    <td>门店介绍</td>
                    <td>门店状态</td>
                    <td>门店图片</td>
                    <td>门店电话</td>
                    <td>营业时间</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in data.list" :key="item.id">
                    <td><input type="checkbox" v-model="ids" :value="item.id" @change="gocheckone"/></td>
                    <td>{{item.shopName}}</td>
                    <td>{{item.addres}}</td>
                    <td>
                        <img :src="item.photo" alt="" style="width: 100px;height: 100px;">
                    </td>
                    <td>
                        <span v-if="item.scope==1">早点早餐</span>
                        <span v-if="item.scope==2">下午茶</span>
                        <span v-if="item.scope==3">晚点夜宵</span>
                    </td>
                    <td>{{item.userName}}</td>
                    <td>{{item.shopDesc}}</td>
                    <td>{{item.state==1?'营业中':'休息中'}}</td>
                    <td>
                        <img :src="item.photoLog" alt="" style="width: 100px;height: 100px;">
                    </td>
                    <td>{{item.phone.substring(0,3)+'****'+item.phone.substring(7,11)}}</td>
                    <td>{{moment(item.startTime).format('HH:mm')}}-{{moment(item.endTime).format('HH:mm')}}</td>
                    <td>
                        <input type="button" value="编辑" @click="ShopPut(item.id)" class="btn btn-info"/>
                        <input type="button" value="删除" @click="ShopDel(item.id)" class="btn btn-danger"/>
                    </td>
                   
                </tr>
            </tbody>
        </table>
        <div>
           当前页数<a style="color: red;">{{quertInfo.pageindex}}</a>条
           共<a style="color: red;">{{data.totalCount}}</a>条
            <span v-for="item in data.totalPage" :key="item" @click="goPage(item)">{{item}}</span>
            
               共<a style="color: red;">{{quertInfo.pageindex}}</a>/<a style="color: red;">{{data.totalCount}}</a>页
           
            <input type="button" value="首页" @click="goPage('a')"/>
            <input type="button" value="上一页" @click="goPage('b')"/>
            <input type="button" value="下一页" @click="goPage('c')"/>
            <input type="button" value="尾页" @click="goPage('d')"/>
        </div>
    </div>
</template>

<script setup lang="ts">
import {ref, reactive,onMounted} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import moment from 'moment';
import axios from 'axios';
import { ok } from 'assert';
let router = useRouter()
let route = useRoute()

onMounted(()=>{
    getShopList();
})
let data:any = reactive({
    list:[],
    totalCount:0,
    totalPage:0,
})
let quertInfo:any = reactive({
    pageindex:1,
    pageSize:2,
    ShopName:'',
    Scope:""
})
//获取门店列表
const getShopList=()=>{
    axios({
        url:'/api/Shop/GetShopList',
        method:'get',
        params:quertInfo
    })
    .then((res)=>{
        console.log(res);
        data.list = res.data.list;
        data.totalCount = res.data.totalCount;
        data.totalPage = res.data.totalPage;
    })
    .catch((err)=>{
        console.log(err);
    })
}
const ok=()=>{
    router.push({path:'/shopadd'})
}
const goPage=(str:any)=>{
    switch(str){
        case 'a':
            quertInfo.pageindex = 1;
            break;
        case 'b':
            quertInfo.pageindex--;
            break;
        case 'c':
            quertInfo.pageindex++;
            break;
        case 'd':
            quertInfo.pageindex = data.totalPage;
            break;
        case str:
            quertInfo.pageindex = str;
            break;
    }
   
    getShopList();
}
//选中
let ids=ref([]);
let checkAll=ref(false);

const gocheckAll=()=>{
    checkAll.value=!checkAll.value;
    if(checkAll.value){
        ids.value=data.list.map((item:any)=>{
            return item.id;
        })
    }
    else{
        ids.value=[];
    }
}
const gocheckone=()=>{
    if(ids.value.length==data.list.length){
        checkAll.value=true;
    }
    else{
        checkAll.value=false;
    }
}

//批删
const ShopAllDelete=()=>{
    var f=confirm('确定删除吗？');
    if(f){
        axios({
            url:'/api/Shop/ShopDeleteAll',
            method:'delete',
            params:{
                ids:ids.value.toString()
            }
        })
        .then((res)=>{
            if(res.data>0){
                alert('删除成功');
                getShopList();
            }
            else{
                alert('删除失败');
            }
        })
    }
}
//单删
const ShopDel=(id:any)=>{
    var f=confirm('确定删除吗？');
    if(f){
        axios({
            url:'/api/Shop/ShopDelete',
            method:'delete',
            params:{
                id:id
            }
        })
        .then((res)=>{
            if(res.data>0){
                alert('删除成功');
                getShopList();
            }
        })
        .catch((err)=>{
            console.log(err);
        })
    }
}
const ShopPut=(id:any)=>{
    router.push({path:'/ShopUpdate',query:{id:id}})
}
//批量修改状态
const ShopAllUpt=(state:any)=>{
    var f=confirm('确定修改吗？');
    if(f){
        axios({
            url:'/api/Shop/ShopUpdateAll',
            method:'put',
            params:{
                ids:ids.value.toString(),
                state:state
            }
        })
        .then((res)=>{
            if(res.data>0){
                alert('修改成功');
                getShopList();
            }
            else{
                alert('修改失败');
            }
        })
    }
}
</script>

<style scoped>
span{
    margin: 0 10px;
}
input[type="button"]{
margin:10px;
}
</style>